<!--定价-->

<template>
  <div class="pc-price">
    <div>
      <img
        :src="require('../../assets/imgs/price/banner-header.png')"
        @load="loadImg('pc-price-banner', 1366, 345)"
        class="pc-price-banner"
      >
    </div>
    <div class="price-level">
      <div class="content">
        <div class="container">
          <div class="tag">
            <span>限时优惠</span>
          </div>
          <div class="price-level-title">白银会员</div>
          <div class="price-level-button">
            <el-button @click="goLogin" round>立即开通</el-button>
          </div>
          <div class="price-level-detail">
            <span>
              <i>¥</i> 500
            </span>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="container">
          <div class="tag">
            <span>限时优惠</span>
          </div>
          <div class="price-level-title">黄金会员</div>
          <div class="price-level-button">
            <el-button @click="goLogin" round>立即开通</el-button>
          </div>
          <div class="price-level-detail">
            <span>
              <i>¥</i> 1000
            </span>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="container">
          <div class="tag">
            <span>限时优惠</span>
          </div>
          <div class="price-level-title">铂金会员</div>
          <div class="price-level-button">
            <el-button @click="goLogin" round>立即开通</el-button>
          </div>
          <div class="price-level-detail">
            <span>
              <i>¥</i> 3000
            </span>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="container">
          <div class="tag">
            <span>限时优惠</span>
          </div>
          <div class="price-level-title">钻石会员</div>
          <div class="price-level-button">
            <el-button @click="goLogin" round>立即开通</el-button>
          </div>
          <div class="price-level-detail">
            <span>
              <i>¥</i> 7000
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="table-title">根据时间人性化定价,平均单场会议活动价格更低</div>
    <el-table :data="tableData" border header-cell-class-name="table-header">
      <el-table-column align="center" class-name="column-height" label="权益" prop="rights"></el-table-column>
      <el-table-column align="center" class-name="column-height" label="普通" prop="normal"></el-table-column>
      <el-table-column align="center" class-name="column-height" label="白银" prop="silver"></el-table-column>
      <el-table-column align="center" class-name="column-height" label="黄金" prop="gold"></el-table-column>
      <el-table-column align="center" class-name="column-height" label="铂金" prop="platinum"></el-table-column>
      <el-table-column align="center" class-name="column-height" label="钻石" prop="diamond"></el-table-column>
    </el-table>
    <div class="pc-function">
      <div>
        <img src="../../assets/imgs/price/discounts.png">
      </div>
      <div>
        <img src="../../assets/imgs/price/function.png">
      </div>
      <div>
        <img src="../../assets/imgs/price/PPT.png">
      </div>
    </div>
    <login :dialogVisible="dialogVisible" :isSignIn="isSignIn" @close="closeDialog"></login>
    <div @click="close" class="login-mask" tabindex="0" v-if="showmask"></div>
    <!-- <div class="price-card">
      <div class="price-card-left">
        <div>一周</div>
        <div>针对短期会议活动</div>
        <div>500元起</div>
        <div>立即开通</div>
      </div>
      <div class="price-card-middle">
        <div>包月</div>
        <div>针对高平会议活动</div>
        <div>1000元起</div>
        <div>立即开通</div>
      </div>
      <div class="price-card-right">
        <div>包季</div>
        <div>针对长期会议活动</div>
        <div>2000元起</div>
        <div>立即开通</div>
      </div>
    </div>-->
  </div>
</template>

<script>
import { loadImg } from '../../utils/util';
import login from './login';

export default {
    name: 'price',
    components: {
        login,
    },
    data() {
        return {
            showmask: false,
            dialogVisible: false,
            isSignIn: '',
            tableData: [
                {
                    rights: '有效期',
                    normal: '-',
                    silver: '360天',
                    gold: '360天',
                    platinum: '360天',
                    diamond: '360天',
                },
                {
                    rights: '现场参会人数',
                    normal: '100',
                    silver: '300',
                    gold: '1000',
                    platinum: '2000',
                    diamond: '不限',
                },
                {
                    rights: '非现场用户',
                    normal: '不限',
                    silver: '不限',
                    gold: '不限',
                    platinum: '不限',
                    diamond: '不限',
                },
                {
                    rights: '发布活动次数',
                    normal: '10',
                    silver: '50',
                    gold: '100',
                    platinum: '150',
                    diamond: '300',
                },
                {
                    rights: '功能同时使用数量',
                    normal: '3',
                    silver: '5',
                    gold: '7',
                    platinum: '10',
                    diamond: '不限',
                },
                {
                    rights: '存储空间',
                    normal: '1G',
                    silver: '20G',
                    gold: '50G',
                    platinum: '100G',
                    diamond: '500G',
                },
                {
                    rights: '活动持续时间',
                    normal: '24小时',
                    silver: '72小时',
                    gold: '72小时',
                    platinum: '72小时',
                    diamond: '72小时',
                },
            ],
        };
    },
    mounted() {
        this.loadImg = loadImg;
        this.loadImg('pc-price-banner', 1366, 345);
        window.addEventListener(
            'resize',
            () => {
                this.loadImg('pc-price-banner', 1366, 345);
            },
            false
        );
        // price-level里的container宽高一致
        let nodes = document.getElementsByClassName('price-level')[0];
        for (let i = 0; i < nodes.children.length; i++) {
            let height = window.getComputedStyle(
                nodes.children[i].children[0],
                null
            ).width;
            nodes.children[i].children[0].style.cssText = 'height:' + height;
        }
    },
    methods: {
        loadImg() {},
        goLogin(a) {
            this.dialogVisible = !0;
            this.$emit('showLogin', true);
            this.isSignIn = a === 'signIn';
            this.showmask = true;
        },
        closeDialog(a) {
            this.dialogVisible = !1;
            this.$emit('showLogin', false);
            this.showmask = false;
        },
        close() {
            this.showmask = false;
        },
    },
};
</script>

<style lang="less">
.pc-price {
    background-color: rgb(251, 251, 251);
    .price-level {
        width: 1200px;
        display: flex;
        margin: 0 auto;
        padding-top: 20px;
        justify-content: space-between;
        .content {
            width: 25%;
            box-sizing: border-box;
            margin-top: 15px;
            &:nth-child(1) {
                padding-right: 20px;
            }
            &:nth-child(2) {
                padding: 0 15px 0 5px;
            }
            &:nth-child(3) {
                padding: 0 10px 0 10px;
            }
            &:nth-child(4) {
                padding-left: 20px;
            }
            .container {
                text-align: center;
                font-weight: bold;
                position: relative;
                overflow: hidden;
                .tag {
                    width: 50%;
                    height: 50%;
                    font-size: 12px;
                    position: absolute;
                    right: 0;
                    transform: rotate(45deg);
                    span {
                        display: block;
                        background: #000;
                        padding: 3px 0;
                        color: rgb(248, 219, 1);
                        visibility: hidden;
                    }
                }
                .price-level-title {
                    font-size: 30px;
                    padding: 50px 0 25px 0;
                }
                .price-level-detail {
                    font-size: 60px;
                    padding: 10px 0 30px 0;
                    span {
                        position: relative;
                    }
                    i {
                        position: absolute;
                        font-style: normal;
                        font-size: 20px;
                        left: -20px;
                        bottom: 15px;
                    }
                }
                .el-button {
                    width: 170px;
                    height: 50px;
                    font-size: 24px;
                    background: rgb(248, 219, 1);
                    color: #000;
                }
                &:hover {
                    .el-button {
                        background: #000;
                        color: rgb(248, 219, 1);
                        border: none;
                    }
                    .tag {
                        span {
                            visibility: visible;
                        }
                    }
                    background: rgb(250, 229, 74);
                }
                background: -webkit-linear-gradient(
                    left,
                    rgb(228, 228, 228),
                    #fff,
                    rgb(228, 228, 228)
                ); /* Safari 5.1 to 6.0 */
                background: -o-linear-gradient(
                    right,
                    rgb(228, 228, 228),
                    #fff,
                    rgb(228, 228, 228)
                ); /* Opera 11.1 to 12.0 */
                background: -moz-linear-gradient(
                    right,
                    rgb(228, 228, 228),
                    #fff,
                    rgb(228, 228, 228)
                ); /* Firefox 3.6 to 15 */
                background: linear-gradient(
                    to right,
                    rgb(228, 228, 228),
                    #fff,
                    rgb(228, 228, 228)
                ); /* 标准语法 */
            }
        }
    }
    .table-title {
        padding: 40px 0;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
    }
    .el-table {
        width: 1200px;
        margin: 0 auto;
    }
    .column-height {
        height: 90px;
        font-size: 16px;
    }
    .table-header {
        background-color: rgb(242, 242, 242);
        font-size: 24px;
        font-weight: bold;
        color: #000;
    }
    .pc-function {
        width: 1200px;
        padding: 33px 0;
        margin: 0 auto;
        display: flex;
        div {
            width: 33.3%;
            box-sizing: border-box;
            &:nth-child(1) {
                padding-right: 10px;
            }
            &:nth-child(2) {
                padding: 0 10px;
            }
            &:nth-child(3) {
                padding-left: 10px;
            }
        }
    }
}
@media screen and (max-width: 768px) {
    .pc-price {
        .pc-function {
            width: 100%;
        }
        .price-level {
            width: 100%;
            flex-wrap: wrap;
            padding-top: 5px;
            .content {
                width: 50%;
                &:nth-child(1),
                &:nth-child(3) {
                    padding: 0 5px 0 10px;
                }
                &:nth-child(2),
                &:nth-child(4) {
                    padding: 0 10px 0 5px;
                }
                .container {
                    .price-level-title {
                        font-size: 20px;
                        padding: 20px 0 15px 0;
                    }
                    .price-level-detail {
                        font-size: 30px;
                        padding: 15px 0 30px 0;
                        i {
                            font-size: 20px;
                            bottom: 8px;
                        }
                    }
                    .el-button {
                        width: 120px;
                        height: 35px;
                        font-size: 18px;
                        margin-top: 10px;
                    }
                }
            }
        }
        .table-title {
            padding: 25px 0;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }
        .column-height {
            height: 50px;
            font-size: 12px;
        }
        .pc-function {
            width: 100%;
            padding: 20px 0;
            flex-wrap: wrap;
            div {
                width: 80%;
                box-sizing: border-box;
                margin: 0 auto;
                padding: 0;
                img {
                    width: 100%;
                    display: block;
                }
                &:nth-child(1) {
                    padding-right: 0;
                }
                &:nth-child(2) {
                    padding: 0;
                }
                &:nth-child(3) {
                    padding-left: 0;
                }
            }
        }
    }
}
</style>